﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Layout.aspx.cs" Inherits="PCC.Framework.JWeb.Views.TestEasyui.Layout" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="Server">
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=7;" />
    <title>Full Layout - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="../../easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../easyui/themes/icon.css">
    <script src="../../easyui/jquery-1.8.0.min.js" type="text/javascript"></script>
    <script src="../../easyui/jquery.easyui.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            windowResize();
            $(window).resize(function () {
                windowResize();
            });

            /*
            *   时间：2013年4月13日 23:06:55
            *	layout方法说明：
            *   参考链接：http://www.jeasyui.com/documentation/layout.php
            *   第一个参数为 方法名称，第二个参数为方法对应的参数
            *   此处的方法为 collapse ，参数为 west,表示折叠west区域
            */
            $(".easyui-layout").layout('collapse', 'west');
        });

        /*
        *   时间：2013年4月13日 22:49:13
        *   在ASPX页面中使用 layout 会出现无法显示的情况
        *   参考链接：http://shiguanyin.iteye.com/blog/835463
        *	解决方案：
        *   1. 根据浏览器实际窗口尺寸调整 form 
        *   2. 需要设置 body 的 padding 和 margin 属性，缺一不可
        *   缺陷：
        *   浏览器窗口右边会有一个灰色滚动条
        *   终极解决方案：
        *   将所有的代码写在form之外即可
        */
        function windowResize() {
            var winHeight = $(window).height();
            var winWidth = $(window).width();
            $(".easyui-layout").height(winHeight);
            $(".easyui-layout").width(winWidth);
            $(".easyui-layout").layout();
        }
    </script>
</head>
<body style="padding:0px; margin:0px; overflow:auto;" >
    <form id="form1" runat="server" class="easyui-layout" style="overflow: auto;">
        <div data-options="region:'north',border:false" style="height: 60px; background: #B3DFDA;
            padding: 10px">
            north region</div>
        <div data-options="region:'west',split:true,title:'West'" style="width: 150px; padding: 10px;">
            west content</div>
        <div data-options="region:'east',split:true,collapsed:true,title:'East'" style="width: 100px;
            padding: 10px;">
            east region</div>
        <div data-options="region:'south',border:false" style="height: 50px; background: #A9FACD;
            padding: 10px;">
            south region</div>
        <div data-options="region:'center',title:'Center'">
        </div>
    </form>
</body>
</html>
